<template>
  <div>
    <h2>深入v-model</h2>

    
    <input type="text" v-model="name"><br/>
    
    <!-- v-model 的本质是 单向数据绑定 v-bind 和 input事件(原生的dom事件)的结合 -->
    <input type="text" :value="name" @input="name = $event.target.value"><br/>

    <span>姓名为：{{name}}</span>  <br/>

    <CustomInput :value="name" @input="name = $event"></CustomInput>
    <hr/>
    <CustomInput v-model="name"></CustomInput> <hr/>

    <!-- props传参 -->
    <CustomInput :name="name"></CustomInput> <hr/>

    <!-- 这里是使用 element-ui 双向数据绑定 -->
    <el-input v-model="name"></el-input>
    <br>
  </div>
</template>

<script type="text/ecmascript-6">
  import CustomInput from './CustomInput.vue'
  export default {
    name: 'ModelTest',
    data() {
      return {
        name: 'luhan',
      }
    },
    components: {
      CustomInput
    }
  }
</script>
